<template>
  <div class="callback-form container">
    <div class="tabs">
      <p :class="{active: activeIndex === 0}"
         @click="activeIndex = 0">
        <i class="iconfont icon-bind"/>
        已有小兔鲜账号，请绑定手机
      </p>
      <p :class="{active: activeIndex === 1}"
         @click="activeIndex = 1">
        <i class="iconfont icon-edit"/>
        没有小兔鲜账号，请完善资料
      </p>
    </div>
    <keep-alive>
      <component :is="[BindForm, PatchForm][activeIndex]"></component>
    </keep-alive>
  </div>
</template>

<script lang="ts"
        setup>
import BindForm from '@/views/login/callback/components/BindForm.vue'
import PatchForm from '@/views/login/callback/components/PatchForm.vue'
import {ref} from 'vue'

let activeIndex = ref<number>(0)
</script>

<style lang="less"
       scoped>
.callback-form {
  background-color: #fff;
  min-height: 500px;

  .tabs {
    padding-top: 40px;
    display: flex;
    justify-content: center;
    font-size: 18px;

    p {
      width: 350px;
      cursor: pointer;
      color: #666666;
      text-align: center;
      line-height: 50px;
      border-bottom: 2px solid #e4e4e4;

      &.active {
        border-bottom: 2px solid @xtxColor;
        color: @xtxColor;
      }
    }
  }
}
</style>